import { useState } from 'react'
import legendaryScrip from '../assets/scrip.webp'
import getNextEffects from '../utils/EffectUtils';
import ResultBody from './ResultBody';
import getNextEquiqment from '../utils/EquipmentUtils';

const scripsCost = [
    {type: 'ranged', cost: [25, 50, 100]},
    {type: 'melee', cost: [25, 50, 100]},
    {type: 'powerarmor', cost: [30, 60, 90]},
    {type: 'armor', cost: [15, 30, 60]},
]

function getItemByType(arr, type) {
    return arr.find(item => item.type === type);
}

export default function Mole() {
    const [scrips, setScrips] = useState(0)
    const [type, setType] = useState('ranged')
    const [effects, setEffects] = useState(null)
    const [key, setKey] = useState(Date.now())
    const [equipment, setEquipment] = useState(null)

    const updateResult = () => {
        const cost = getItemByType(scripsCost, type).cost[2]
        setEquipment(getNextEquiqment(type))
        setEffects(getNextEffects(type, null))
        setKey(Date.now())
        setScrips(scrips + cost)
    }

    return (
        <>
            <div className='statistics'>
                You have wasted:
                <div className='stat-detail'>
                    <div className='number'>
                        {scrips}
                    </div>
                    <div className='icon'>
                        &nbsp;
                        <img src={legendaryScrip} style={{ height: '30px' }}></img>
                    </div>
                </div>
            </div>
            <div>
                <select id='typeSelector' style={{ width: '200px' }} value={type} onChange={(event) => setType(event.target.value)}>
                    <option value={'ranged'}>⭐⭐⭐Ranged Weapon</option>
                    <option value={'melee'}>⭐⭐⭐Melee Weapon</option>
                    <option value={'armor'}>⭐⭐⭐Armor</option>
                    <option value={'powerarmor'}>⭐⭐⭐Power Armor</option>
                </select>
            </div>
            <div id="crafter">
                <div className='resultBody'>
                    {effects ? <ResultBody key={key} effects={effects} equipment={equipment}></ResultBody> : 'Click the button and start crafting!'}
                </div>
                <div className='regenerate-btn'>
                    <button onClick={updateResult} className='craft-btn'>Gocha!</button>
                    <button onClick={() => setScrips(0)} className='craft-btn'>Reset Counter</button>
                </div>
            </div>
        </>
    )
}